<template>
  <div class="role-manage-container">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-neutral-800 dark:text-neutral-100">角色管理</h1>
    </div>

    <!-- 用户信息卡片 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm p-8 mb-6">
      <!-- 周宇轩标题 -->
      <div class="text-center mb-6">
        <div class="inline-block px-6 py-2 bg-neutral-200 dark:bg-neutral-700 rounded">
          <span class="text-lg font-medium text-neutral-800 dark:text-neutral-100">周宇轩</span>
        </div>
        <div class="mt-2 text-sm text-neutral-500">
          管理员or审批员
        </div>
      </div>

      <!-- 用户详细信息 -->
      <div class="grid grid-cols-2 gap-6 max-w-4xl mx-auto">
        <div class="flex">
          <div class="w-32 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            姓名
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            周宇轩
          </div>
        </div>

        <div class="flex">
          <div class="w-32 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            角色
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            审批员
          </div>
        </div>

        <div class="flex">
          <div class="w-32 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            账号
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            zhouyuxuan
          </div>
        </div>

        <div class="flex">
          <div class="w-32 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            电话
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            1111111111
          </div>
        </div>

        <div class="flex">
          <div class="w-32 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            单位
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            jrlc
          </div>
        </div>

        <div class="flex">
          <div class="w-32 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            创建时间
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            2023-10-05 14:32:35
          </div>
        </div>
      </div>
    </div>

    <!-- 权限修改窗口 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm p-8 max-w-4xl mx-auto">
      <div class="bg-cyan-50 dark:bg-cyan-900/30 px-4 py-2 mb-6 inline-block">
        <span class="text-neutral-800 dark:text-neutral-100 font-medium">权限修改弹窗</span>
      </div>

      <div class="border border-neutral-200 dark:border-neutral-600 p-8">
        <div class="flex items-center justify-between mb-4">
          <div class="w-32 bg-neutral-200 dark:bg-neutral-700 px-6 py-3 font-medium text-neutral-700 dark:text-neutral-300 text-center">
            权限
          </div>
          <div class="flex-1 ml-6">
            <!-- 权限选项 -->
            <div class="space-y-4">
              <div class="flex items-center justify-between py-3 px-4 border border-neutral-200 dark:border-neutral-600">
                <span class="text-neutral-800 dark:text-neutral-100">授权导出权限</span>
                <el-switch v-model="permissions.export" size="large" />
              </div>
              <div class="flex items-center justify-between py-3 px-4 border border-neutral-200 dark:border-neutral-600">
                <span class="text-neutral-800 dark:text-neutral-100">审批权限</span>
                <el-switch v-model="permissions.approve" size="large" />
              </div>
              <div class="flex items-center justify-between py-3 px-4 border border-neutral-200 dark:border-neutral-600">
                <span class="text-neutral-800 dark:text-neutral-100">日志查看权限</span>
                <el-switch v-model="permissions.viewLog" size="large" />
              </div>
            </div>
          </div>
        </div>

        <!-- 保存按钮 -->
        <div class="flex justify-center mt-8">
          <el-button type="primary" size="large" @click="savePermissions" class="w-32">
            保存
          </el-button>
        </div>
      </div>

      <!-- 编辑档案按钮 -->
      <div class="flex justify-center mt-8">
        <el-button size="large" @click="editProfile" class="w-32">
          编辑档案
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'

const permissions = reactive({
  export: false,
  approve: false,
  viewLog: false
})

const savePermissions = () => {
  ElMessage.success('权限设置已保存')
}

const editProfile = () => {
  ElMessage.info('进入编辑模式')
}
</script>

<style scoped>
.role-manage-container {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:deep(.el-switch) {
  --el-switch-on-color: #1890ff;
}
</style>

